<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
      <el-row :gutter="10" class="queryform">
        <el-col :span="12">
        <el-form-item label="浮标" prop="buyoParams" style="width: 25%">
          <el-select v-model="buyoParams" placeholder="请选择查询的浮标">
            <el-option v-for="buyo in buyoList" :key="buyo.id" :label="buyo.buoyName"
            :value="buyo.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item label="查询选项" prop="selectParams" style="width: 50%">
        <el-select v-model="selectParams" placeholder="请选择查询选项" clearable>
          <el-option v-for="dict in selectedYpInfoColumns" :key="dict.paraValue" :label="dict.paraName"
          :value="dict.paraValue"></el-option>
        </el-select>
      </el-form-item>
    </el-col>
        <el-col :span="12">
        <el-form-item label="日期单位" prop="dateUnit">
          <el-select v-model="queryParams.dateUnit" placeholder="请选择查询的日期单位" style="width: 60%" clearable>
            <el-option label="日" value="0" />
            <el-option label="月" value="1" />
            <el-option label="年" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    <el-col :span="12" v-if="queryParams.dateUnit=='0'">
      <el-form-item label="开始日期" prop="startDate" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="12" v-if="queryParams.dateUnit=='0'">
      <el-form-item label="结束日期" prop="endDate" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
    </el-col>


    <el-col :span="12" v-if="queryParams.dateUnit=='1'">
      <el-form-item label="月份" prop="monthList" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.monthList"
          type="months"
          value-format="yyyy-MM"
          placeholder="请选择月份(可多选)">
        </el-date-picker>
      </el-form-item>
    </el-col>

    <el-col :span="12" v-if="queryParams.dateUnit=='2'">
      <el-form-item label="年份" prop="yearList" style="width: 60%">
        <el-date-picker clearable
          v-model="queryParams.yearList"
          type="years"
          value-format="yyyy"
          placeholder="请选择年份(可多选)">
        </el-date-picker>
      </el-form-item>
    </el-col>

    <el-col :span="24">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-form-item>
    </el-col>
    </el-row>
    </el-form>



      <el-table ref="table" v-loading="loading" :data="data"  border stripe>
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column prop="displayDate" label="日期" />
      <el-table-column prop="buoyName" label="浮标名" />
      <el-table-column prop="selectParamsName" label="海洋数据名称"/>
      <el-table-column prop="totalCount" label="数据量"/>
      <el-table-column prop="averageCount" label="平均值"/>
      <el-table-column prop="varianceCount" label="方差"/>
      <el-table-column prop="sdCount" label="标准差"/>
      <el-table-column prop="maxCount" label="最大值"/>
      <el-table-column prop="minCount" label="最小值"/>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="viewPicture(scope.row)"
          >查看图形</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { listSeaStatistics } from "@/api/statistics/seaStatistics";
import { listBuoy } from "@/api/buoy/buoy";

export default {
  name: 'seaStatistics',
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      queryParams : {
        pageNum: 1,
        pageSize: 10,
        dateUnit:'2',
        startDate: null,
        endDate: null,
        monthList: '',
        yearList: "2023",
        selectParams: null,
        selectParamsName: null,
        buoyName: null,
      },
      loading: true,
      data: [],
      statisticsParames:{},
      tableHeight: '',
      // 总条数
      total: 0,
      // 重置参数
      resutParams:{
        pageNum: 1,
        pageSize: 10
      },
      buyoParams: null,
      buyoList:[],
      //所有选项
      selectedYpInfoColumns: [
       {
        paraValue: 'tenAirPressure',
        paraName: '气压'
        },{
        paraValue: 'tenAirTemperature',
        paraName: '气温'
        },{
        paraValue: 'tenAirHumidity',
        paraName: '湿度'
        },{
        paraValue: 'atenWindSpeed',
        paraName: 'A风速'
        },{
        paraValue: 'atenWindDirection',
        paraName: 'A风向'
        },{
        paraValue: 'btenWindSpeed',
        paraName: 'B风速'
        },{
        paraValue: 'btenWindDirection',
        paraName: 'B风向'
        },{
        paraValue: 'significantWavHeight',
        paraName: '有效波高'
        },{
        paraValue: 'validityPeriod',
        paraName: '有效周期'
        },{
        paraValue: 'averageWaveHeight',
        paraName: '平均波高'
        },{
        paraValue: 'averagePeriod',
        paraName: '平均周期'
        },{
        paraValue: 'waveDirection',
        paraName: '波向'
        },{
        paraValue: 'waveNumber',
        paraName: '波数'
        },{
        paraValue: 'currentWaterTemperature',
        paraName: '海流水温'
        },{
        paraValue: 'warmSaltWaterTemperature',
        paraName: '温盐水温'
        },{
        paraValue: 'independentWaterTemperature',
        paraName: '独立水温'
        },{
        paraValue: 'waterQualityAndTemperature',
        paraName: '水质水温'
        },{
        paraValue: 'salinity',
        paraName: '盐度'
        },{
        paraValue: 'oneCurrentVelocity',
        paraName: '第1层海流流速'
        },{
        paraValue: 'twoCurrentVelocity',
        paraName: '第2层海流流速'
        },{
        paraValue: 'threeCurrentVelocity',
        paraName: '第3层海流流速'
        },{
        paraValue: 'fourCurrentVelocity',
        paraName: '第4层海流流速'
        },{
        paraValue: 'fiveCurrentVelocity',
        paraName: '第5层海流流速'
        },{
        paraValue: 'oneCurrentDirection',
        paraName: '第1层海流流向'
        },{
        paraValue: 'twoCurrentDirection',
        paraName: '第2层海流流向'
        },{
        paraValue: 'threeCurrentDirection',
        paraName: '第3层海流流向'
        },{
        paraValue: 'fourCurrentDirection',
        paraName: '第4层海流流向'
        },{
        paraValue: 'fiveCurrentDirection',
        paraName: '第5层海流流向'
        }
        ],
      selectParams:'tenAirPressure',
    }
  },
  created() {
    //查询浮标
    listBuoy().then(response => {
    this.buyoList = response.rows;
    this.buyoParams=this.buyoList[0].id
    this.getList();
  });
  },
  methods: {
    getList() {
      this.loading = true;
      this.getParame();
      // 设置 endDate 为 日期的为 23:59:59
      // if(this.queryParams.endDate){
      //   const endDate = new Date(this.queryParams.endDate);
      //   endDate.setHours(23, 59, 59, 999);
      //   this.queryParams.endDate = endDate.toISOString().split('T')[0] + ' 23:59:59';    
      // }
      listSeaStatistics(this.queryParams).then(response => {
        this.data=response.rows;
        this.loading=false;
      });

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams=this.resutParams;
      this.selectParams='';
      this.resetForm("queryForm");
    },
    /** 导出按钮操作 */
    handleExport() {
      this.getParame();
      this.download('/sea/statistics/exportStatistics', {
        ...this.queryParams
      }, `seaStatistics_${new Date().getTime()}.xlsx`)
    },
    getParame(){
       //查询浮漂
      this.queryParams.buoyId = this.buyoParams;
      this.queryParams.selectParams = this.selectParams;
      this.queryParams.selectParamsName = this.selectedYpInfoColumns.find(item => item.paraValue === this.selectParams).paraName
      this.queryParams.buoyName=this.buyoList.find(f=>f.id === this.buyoParams).buoyName;
      if(this.queryParams.dateUnit === "0"){
        if(this.queryParams.startDate==null || this.queryParams.endDate==null){
          this.$message.error(`请选择开始和结束日期!`);
          this.loading=false;
          return;
        }
        this.queryParams.monthList=null;
        this.queryParams.yearList=null;
      }else if(this.queryParams.dateUnit === "1"){
        if(this.queryParams.monthList==null){
          this.$message.error(`请选择一个或多个月份!`);
          this.loading=false;
          return;
        }
        this.queryParams.startDate=null;
        this.queryParams.endDate=null;
        this.queryParams.yearList=null;
      }else if(this.queryParams.dateUnit === "2"){
        if(this.queryParams.yearList==null){
          this.$message.error(`请选择一年或多个年份!`);
          this.loading=false;
          return;
        }
        this.queryParams.startDate=null;
        this.queryParams.endDate=null;
        this.queryParams.monthList=null;
      }
    }
  }
}
</script>
